<!DOCTYPE html>
<html>
<head>
    <title>登录调试测试</title>
    <style>
        body { 
            font-family: Arial, sans-serif; 
            margin: 20px; 
            background-color: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .result { 
            margin-top: 10px; 
            padding: 15px; 
            border-radius: 5px; 
            font-family: monospace;
            white-space: pre-wrap;
        }
        .success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
        .info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
        button { 
            padding: 10px 20px; 
            margin: 5px; 
            background: #007bff; 
            color: white; 
            border: none; 
            border-radius: 3px; 
            cursor: pointer; 
        }
        button:hover { background: #0056b3; }
        input[type="text"], input[type="password"] {
            width: 200px;
            padding: 8px;
            margin: 5px;
            border: 1px solid #ddd;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔐 登录流程调试测试</h1>
        
        <h3>测试后端API响应处理</h3>
        <p>这将模拟您的后端API响应格式，测试前端处理逻辑</p>
        
        <div style="margin: 20px 0;">
            <h4>模拟后端响应:</h4>
            <div class="result info">{
  "success": true,
  "data": {
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
  }
}</div>
        </div>
        
        <button onclick="testResponseProcessing()">测试响应处理逻辑</button>
        <button onclick="testTokenExtraction()">测试Token提取</button>
        
        <div id="testResult" class="result"></div>
        
        <hr style="margin: 30px 0;">
        
        <h3>实际登录测试</h3>
        <div>
            <input type="text" id="username" placeholder="用户名" value="admin">
            <input type="password" id="password" placeholder="密码" value="123456">
            <button onclick="testActualLogin()">实际登录测试</button>
        </div>
        
        <div id="loginResult" class="result"></div>
    </div>

    <script>
        // 模拟Vue Element Admin的响应拦截器逻辑
        function processResponse(responseData) {
            const res = responseData;
            
            console.log('Processing response:', res);
            
            // 1. 检查基于success字段的格式
            if (res.success !== undefined) {
                if (res.success === false) {
                    throw new Error(res.message || res.msg || 'Error');
                } else {
                    return res;  // success为true，返回整个响应
                }
            }
            
            // 2. 检查基于code字段的格式
            if (res.code !== undefined && res.code !== 20000) {
                throw new Error(res.message || 'Error');
            }
            
            // 3. 默认情况
            return res;
        }
        
        // 模拟Token提取逻辑
        function extractToken(response) {
            console.log('Extracting token from:', response);
            
            let token = null;
            
            if (response.success && response.data && response.data.token) {
                // 格式: { success: true, data: { token: "..." } }
                token = response.data.token;
            } else if (response.token) {
                // 格式: { token: "..." }
                token = response.token;
            } else if (response.data && response.data.token) {
                // 格式: { data: { token: "..." } }
                token = response.data.token;
            } else if (response.access_token) {
                // 格式: { access_token: "..." }
                token = response.access_token;
            }
            
            return token;
        }
        
        function testResponseProcessing() {
            const result = document.getElementById('testResult');
            
            // 测试您的后端响应格式
            const mockResponse = {
                "success": true,
                "data": {
                    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NTE2MzYzNzYsImlhdCI6MTc1MTAzMTU3NiwiaXNzIjoia2VuIiwiZGF0YSI6eyJpZCI6MywidXBkYXRlZF9hdCI6MTc1MTAzMTU3Nn19.tO-mK2eIR7-ucRB-oNTx32oGaP2jvjxo6Xn29748QM4"
                }
            };
            
            try {
                const processed = processResponse(mockResponse);
                result.innerHTML = `测试结果: ✅ 响应处理成功
                
输入响应:
${JSON.stringify(mockResponse, null, 2)}

处理后响应:
${JSON.stringify(processed, null, 2)}`;
                result.className = 'result success';
            } catch (error) {
                result.innerHTML = `测试结果: ❌ 响应处理失败
                
错误: ${error.message}

输入响应:
${JSON.stringify(mockResponse, null, 2)}`;
                result.className = 'result error';
            }
        }
        
        function testTokenExtraction() {
            const result = document.getElementById('testResult');
            
            const mockResponse = {
                "success": true,
                "data": {
                    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NTE2MzYzNzYsImlhdCI6MTc1MTAzMTU3NiwiaXNzIjoia2VuIiwiZGF0YSI6eyJpZCI6MywidXBkYXRlZF9hdCI6MTc1MTAzMTU3Nn19.tO-mK2eIR7-ucRB-oNTx32oGaP2jvjxo6Xn29748QM4"
                }
            };
            
            try {
                const processed = processResponse(mockResponse);
                const token = extractToken(processed);
                
                if (token) {
                    result.innerHTML = `测试结果: ✅ Token提取成功
                    
提取的Token:
${token}

Token长度: ${token.length} 字符
Token前缀: ${token.substring(0, 20)}...`;
                    result.className = 'result success';
                } else {
                    result.innerHTML = `测试结果: ❌ Token提取失败
                    
未找到Token
响应数据:
${JSON.stringify(processed, null, 2)}`;
                    result.className = 'result error';
                }
            } catch (error) {
                result.innerHTML = `测试结果: ❌ 处理失败
                
错误: ${error.message}`;
                result.className = 'result error';
            }
        }
        
        async function testActualLogin() {
            const result = document.getElementById('loginResult');
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            result.innerHTML = '正在测试登录...';
            result.className = 'result info';
            
            try {
                const response = await fetch('http://localhost:8000/user/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        username: username,
                        password: password
                    })
                });
                
                const data = await response.json();
                
                if (response.ok) {
                    // 模拟前端处理逻辑
                    try {
                        const processed = processResponse(data);
                        const token = extractToken(processed);
                        
                        if (token) {
                            result.innerHTML = `✅ 登录成功！
                            
HTTP状态: ${response.status}
原始响应:
${JSON.stringify(data, null, 2)}

提取的Token: ${token.substring(0, 50)}...

🎉 前端应该能正确处理这个响应！`;
                            result.className = 'result success';
                        } else {
                            result.innerHTML = `❌ Token提取失败
                            
HTTP状态: ${response.status}
响应数据:
${JSON.stringify(data, null, 2)}`;
                            result.className = 'result error';
                        }
                    } catch (processError) {
                        result.innerHTML = `❌ 响应处理失败
                        
处理错误: ${processError.message}
原始响应:
${JSON.stringify(data, null, 2)}`;
                        result.className = 'result error';
                    }
                } else {
                    result.innerHTML = `❌ 登录失败
                    
HTTP状态: ${response.status}
错误响应:
${JSON.stringify(data, null, 2)}`;
                    result.className = 'result error';
                }
            } catch (error) {
                result.innerHTML = `❌ 网络错误
                
错误: ${error.message}
请确保后端服务运行在 http://localhost:8000`;
                result.className = 'result error';
            }
        }
    </script>
</body>
</html>